<template>
  <div class="content-list">
    <div class="cl-left">
      <recommend-view>
        <template v-slot:title>
          <h2>{{title}}</h2>
          <path-link class="path-size" :pathlink="pathlink" />
        </template>
        <template v-slot:content>
          <recom-full
            @clickcontent="clickcontent"
            :blogList="blogList"
            :getBlogList="getBlogList"
            :totalPage="totalPage"
          />
        </template>
      </recommend-view>
    </div>
    <div class="cl-right">
      <recommend-view>
        <template v-slot:title>
          <span class="recom-span">频道点击排行</span>
        </template>
        <template v-slot:content>
          <article-item :hotList="hotList"/>
        </template>
      </recommend-view>
    </div>
  </div>
</template>

<script>
import RecommendView from "components/content/recommendview/RecommendView";
import RecomFull from "components/content/recommendview/RecomFull";
import ArticleItem from "components/content/article/ArticleItem";
import PathLink from "components/content/pathlink/PathLink";

import { request } from "network/request";

export default {
  name: "searchshow",
  components: {
    RecommendView,
    RecomFull,
    ArticleItem,
    PathLink
  },
  data() {
    return {
      /**
       * 推荐列表
       */
      recommendList: [],
      /**
       * 博客最新发布的列表
       */
      blogList: [],
      /**
       * 分页条总页数
       */
      totalPage: 0,
      /**
       * 热门文章的列表
       */
      hotList: [],
      //标题下跳转路径
      pathlink: [
        { title: "主页", topath: "/home" },
        { title: "学习", topath: "/study" }
      ]
    };
  },
  props: {
    title: {
      type: String,
      default: "学习"
    }
  },
  mounted() {
    this.getBlogList(1);
    /**
     * 初始化右侧热门博客文章，
     */
    this.getBlogListByHot();
  },
  methods: {
    clickcontent() {
      console.log("---");
    },
    /**
     * 获取博客最新列表
     */
    getBlogList(page) {
      request({
        url: "/blog/getBlogList?page=" + page,
        method: "get"
      })
        .then(response => {
          this.blogList = response.data.data;
          this.totalPage = response.data.totalPage;
          console.log(this.totalPage);
        })
        .catch(error => {
          alert("请求失败");
        });
    },
    /**
    *  获取热门文章列表
    */
    getBlogListByHot(){
      request({
        url:'/blog/getBlogListByHot',
        method: 'get'
      }).then(response => {
        this.hotList = response.data
      }).catch(error => {
        this.$message.error('请求数据失败')
      })
    }
  }
}
</script>

<style scoped>
.path-size {
  font-size: 12px;
}
</style>
